import React from 'react'
import {Form,Input,Select,Spin} from 'antd'
const SelectOption = Select.Option
import PropTypes from 'prop-types'
import {patterns,post} from '../../Util'
const FormItem = Form.Item
const itemLayout = {
  labelCol: {
    span:8
  },
  wrapperCol: {
    span:14
  },
}
class BusinessForm extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      businessUser:this.props.businessUser,
      introducesData:[],
    }
  }
  componentWillMount(){
    this.props.setForm(this.props.form)
  }
  componentDidMount(){
    this.fetchUsers('')
  }
  fetchUsers(value){
    this.setState({
      fetching:true,
      value:value,
      introducesData:[],
    })
    post('/api/center/business/introduce/list?key='+value).then(json => {
      this.setState({
        fetching:false,
        introducesData:json.data,
      })
    })
  }
  handleUsersChange(value){
    const {businessUser} = this.state
    businessUser.introduceId = value
    this.setState({
      businessUser,
      data: [],
      fetching: false,
    })
  }
  render(){
    const {form} = this.props
    const {getFieldDecorator} = form
    const {businessUser,fetching,introducesData} = this.state
    return (
      <Form>
        <FormItem label="商家名称：" key="nickname" hasFeedback {...itemLayout}>
          {getFieldDecorator('businessUser.nickname', {
            initialValue:businessUser.nickname,
            rules: [{ required: true, message: '请输入商家名' }],
          })(
            <Input />
          )}
        </FormItem>
        <FormItem label="联系手机号：" key="phoneNumber" hasFeedback {...itemLayout}>
          {getFieldDecorator('businessUser.phoneNumber',{
            initialValue:businessUser.phoneNumber,
            rules:[{
              required:true,message:'请输入联系电话'
            },{
              pattern:patterns.phoneNumber,message:'请输入正确的手机号码'
            }]
          })(<Input/>)}
        </FormItem>
        <FormItem label="联系人姓名：" key="contactName" hasFeedback {...itemLayout}>
          {getFieldDecorator('businessUser.contactName',{
            initialValue:businessUser.contactName,
            rules:[{
              required:true,message:'请输入联系人姓名'
            }]
          })(<Input/>)}
        </FormItem>
        <FormItem label="常用联系微信："  key="wechat" hasFeedback {...itemLayout}>
          {getFieldDecorator('businessUser.wechat',{
            initialValue:businessUser.wechat,
          })(<Input />)}
        </FormItem>
        <FormItem label="常用联系qq："  key="qq" hasFeedback {...itemLayout}>
          {getFieldDecorator('businessUser.qq',{
            initialValue:businessUser.qq,
          })(<Input />)}
        </FormItem>
        <FormItem label="介绍人："  key="introduceId" hasFeedback {...itemLayout}>
          {getFieldDecorator('businessUser.introduceId',{
            initialValue:introducesData.length > 0 ?businessUser.introduceId:null,
            rules:[{
              required:true,message:'请填写介绍人'
            }]
          })(<Select
                placeholder="可输入介绍人/序列号搜索"
                filterOption={false}
                onSearch={this.fetchUsers.bind(this)}
                showSearch
                onChange={this.handleUsersChange.bind(this)}
                notFoundContent={fetching ? <Spin size="small" /> : null}
              >
                  {introducesData.map((d,index) => {
                    return <SelectOption key={'combobox'+index} value={d.userId}>{d.nickname}</SelectOption>
                  })}
              </Select>)}
        </FormItem>
      </Form>
    )
  }
}

BusinessForm.propTypes = {
  businessUser:PropTypes.object,
  form:PropTypes.object,
  setForm:PropTypes.func,
}

BusinessForm.defaultProps = {
  setForm:()=>{}
}

export default Form.create({
  onFieldsChange(props,fields){
    props.onChange(fields)
  }
})(BusinessForm)